@import '../../../themes/mixins/animations';

.component {
  bottom: 64px;
  font-family: var(--font-regular);
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: 2500;
}

.syncing {
  color: var(--theme-syncing-text-color);
}

.headline {
  font-size: 18px;
  margin-bottom: 14px;
}

.description {
  color: var(--theme-connecting-description-color);
  font-size: 16px;
  line-height: 22px;
  margin: 0 auto;
  max-width: 580px;
}

.connecting {
  color: var(--theme-connecting-text-color);
  .headline {
    overflow: visible;
    &:not(.withoutAnimation) {
      @include animated-ellipsis($width: 20px);
    }
  }
}

.component,
.headline {
  --webkit-backface-visibility: hidden;
}
